<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no">
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        var docEl = document.documentElement;
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 10) + 'px';
        $(document).ready(function () {
            (function (doc, win) {
                var docEl = doc.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth;
                            docEl.style.fontSize = (clientWidth / 10) + 'px';
                        };

                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);
        });
    </script>
    <link rel="stylesheet" href="../../style/css/index.css"/>
</head>
<body>
<div style="background: #f7f7f7;width: 100%;height: 100%">
    <!--header-->
    <div class="header">
        <img class="back" onclick="history.go(-1);" src="../../style/images/sg_ic_back.png" alt=""/>

        <div class="search_box">
            <img src="../../style/images/sg_ic_search_1@2x.png" alt=""/>
            <input id="searchCon" type="text" placeholder="搜索商品"/>

            <div style="        float: right;height: 22px;width: 14%;text-align: center;background: #ffcd00;line-height: 22px;color :#fff;border-radius: 6px;font-size: 12px;margin-top: 6px;"
                 id="onSearch">搜索
            </div>
        </div>
    </div>
    <!-- content-->
    <div class="search_content">
        <p class="search_hot">热门</p>
        <ul class="search_thing" id="search_thing">
        </ul>
        <div class="clear"></div>
    </div>
    <div class="search_history">
        <p class="s_history">搜索历史</p>
        <ul class="search_main" id="h-search-item">

        </ul>
    </div>
    <p class="clean" id="clearData"><img src="../../style/images/icon_delte.png" alt=""/>清空历史搜索</p>
</div>
<script src="../../js/md5.js"></script>
<script src="../../js/md5_need.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        saveData();
        upData();
        clearkey();
        searchKey();
    });
    function saveData() {
        var kwdCacheKey = 'h_kwd_list';     //定义数据存储对象名

        $('#onSearch').on('tap', function () {
            var currentKwd = $('#searchCon').val(),     //搜索内容
                    currentKwdKey = 'k_' + currentKwd,        //当前搜索值对应的键值
                    currentKwdList = {},                    //创建json对象
                    kwdStr = localStorage.getItem(kwdCacheKey);     //获取历史搜索内容（字符串）
            if (kwdStr !== null) {
                var kwdList = JSON.parse(kwdStr);       //将历史搜索内容转化为对象
            }

            currentKwdList[currentKwdKey] = currentKwd; //将当前输入关键字动态加入新创建json对象中

            if (kwdList == undefined) {   //如果不存在历史搜索内容，直接将当前搜索内容转化为字符串
                var kwdTxt = JSON.stringify(currentKwdList);
            } else {
                //合并对象（当前搜索内 和 历史 搜索内容）
                var kwdTxtObj = mergeToRepeat(currentKwdList, kwdList);
                //转化为序列化json字符串格式
                kwdTxt = JSON.stringify(kwdTxtObj);
            }
            localStorage.setItem(kwdCacheKey, kwdTxt);  //存入localStorage
        })

    }

    function upData() {  //取数据
        var kwdTxt = window.localStorage.h_kwd_list ? window.localStorage.h_kwd_list : undefined;
        if (kwdTxt !== undefined) {
            kwdTxtObj = JSON.parse(kwdTxt);
            //console.log(kwdTxtObj);

            for (var attr in kwdTxtObj) { //遍历对象
                var item = '';
                item += '<li>';
                item += '<img src="../../style/images/sg_ic_search_1@2x.png" alt=""/>';
                item += '<span>' + kwdTxtObj[attr] + '</span>';
                item += '</li>';
                $('#h-search-item').append(item);
            }
        }
    }

    function clearkey() {
        //清空历史记录 并刷新页面
        $('#clearData').on('tap', function () {
            //localStorage.clear();   //删除所有localStorage的值
            localStorage.removeItem('h_kwd_list'); //删除h_kwd_list这个键值的里面所有的值
            location.reload();
        })
    }

    function searchKey() {   //直接用历史记录查询
        $('#h-search-item li').on('tap', function () {
            $('#searchCon').val($(this).text());
        })
    }
    function mergeToRepeat(json1, json2) {    //遍历两个对象合成一个并将两个对象中重复的键值的值去掉前一个
        var resJson = {};
        for (var i in json1) {
            resJson[i] = json1[i];
        }
        for (var i in json2) {
            resJson[i] = json2[i];
        }
        ;
        return resJson;
    }
    $(document).ready(function () {
        var indexJs = {
            search: function () {
                var data = {
                    apiCode: '_search_001',
                    key: $("#searchCon").val()
                };
                http(data, function (responed) {
                    console.log(responed);
                    var $info = responed.info;
                    $.each($info, function (i, n) {
                        window.location.href = 'searchResult.html?=' + n.id + '';
                    });
                })
            },
            hot: function () {
                var data = {
                    apiCode: '_hotkey_list_001',
                    user_token: "86b427f571d452f17272b356061a1db2"
                };
                http(data, function (responed) {
                    console.log(responed);
                    var $info = responed.info;
                    var temp = '';
                    $.each($info, function (i, n) {
                        temp += '<li>' + n + '</li>';
                    });
                    $("#search_thing").append(temp)
                })
            }
        };
        $("#onSearch").click(function () {
            if ($("#searchCon").val() == '') {
                alert("请输入搜索");
            } else {
                indexJs.search();
            }

        });
        indexJs.hot();


    });
</script>
</body>
</html>